<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    :append-to-body="true"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div slot="title" class="title_close">
      <!-- 货币兑换 -->
      <div class="title">
        {{ $t("account_dialog.exchange_dialog.56hu1m6wc3s0") }}
      </div>
      <img
        src="@/assets/img/icon_gb1.png"
        class="close"
        @click="hideExchange"
      />
    </div>
    <!-- 兑换类型选择 -->
    <div class="exchange_obj">
      <el-select
        v-model="exchangeDate.from"
        :placeholder="$t('account_dialog.exchange_dialog.56hu1m6wde00')"
        @change="getExchange"
      >
        <template slot="prefix">
          <img
            class="type_img"
            v-if="exchangeDate.from === 'CNH'"
            prefix
            src="@/assets/img/image_hs.png"
            alt=""
          />
          <img
            class="type_img"
            v-else-if="exchangeDate.from === 'USD'"
            prefix
            src="@/assets/img/image_usd.png"
            alt=""
          />
          <img
            class="type_img"
            v-else
            prefix
            src="@/assets/img/image_HKD.png"
            alt=""
          />
        </template>
        <el-option
          v-for="item in option"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <img
        @click="changeTo"
        style="cursor: pointer"
        class="type_jh"
        src="@/assets/img/icon_jh.png"
        alt=""
      />
      <el-select
        v-model="exchangeDate.to"
        @change="getExchange"
        :placeholder="$t('account_dialog.exchange_dialog.56hu1m6wde00')"
      >
        <template slot="prefix">
          <img
            v-if="exchangeDate.to === 'CNH'"
            prefix
            src="@/assets/img/image_hs.png"
            alt=""
            class="type_img"
          />
          <img
            v-else-if="exchangeDate.to === 'USD'"
            prefix
            src="@/assets/img/image_usd.png"
            alt=""
            class="type_img"
          />
          <img
            v-else
            prefix
            class="type_img"
            src="@/assets/img/image_HKD.png"
            alt=""
          />
        </template>
        <el-option
          v-for="item in option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 兑换输入 -->
    <div class="exchange_input">
      <div class="currency">
        <div class="type">{{ exchangeDate.from | exchangeType(te) }}</div>
        <input
          class="amount"
          type="number"
          title=" "
          @input="estimateCost(exchangeDate.amount)"
          v-model="exchangeDate.amount"
          :placeholder="$t('account_dialog.exchange_dialog.56hu1m6wdp40')"
        />
      </div>
      <div class="total_amount">
        <div class="type">
          {{ $t("account_dialog.exchange_dialog.56hu1m6we740") }}
        </div>
        <div class="total" v-if="exchangeDate.from === 'CNH'">
          <div>
            <span>{{
              Number(account.assetAccount.CN.balance) | formatNumberRgx
            }}</span>
            {{ exchangeDate.from }}
          </div>
          <div
            class="exchange_total"
            @click="estimateCost(account.assetAccount.CN.balance)"
          >
            {{ $t("account_dialog.exchange_dialog.56hu1m6weio0") }}
          </div>
        </div>
        <div class="total" v-else-if="exchangeDate.from === 'USD'">
          <div class="">
            <span>{{
              Number(account.assetAccount.US.balance) | formatNumberRgx
            }}</span>
            {{ exchangeDate.from }}
          </div>
          <div
            class="exchange_total"
            @click="estimateCost(account.assetAccount.US.balance)"
          >
            {{ $t("account_dialog.exchange_dialog.56hu1m6weio0") }}
          </div>
        </div>
        <div class="total" v-else>
          <div class="">
            <span>{{
              Number(account.assetAccount.HK.balance) | formatNumberRgx
            }}</span>
            {{ exchangeDate.from }}
          </div>
          <div
            class="exchange_total"
            @click="estimateCost(account.assetAccount.HK.balance)"
          >
            {{ $t("account_dialog.exchange_dialog.56hu1m6weio0") }}
          </div>
        </div>
      </div>
      <div class="total_amount">
        <div class="type">
          {{ $t("account_dialog.exchange_dialog.56hu1m6wesc0") }}
        </div>
        <div class="total">
          <div>
            {{ account.rate }} {{ exchangeDate.from }} = 1
            {{ exchangeDate.to }}
          </div>
          <div @click="getExchange" class="exchange_total">
            {{ $t("account_dialog.exchange_dialog.56hu1m6wf100") }}
          </div>
        </div>
      </div>
      <div class="currency">
        <div class="type">
          {{ $t("account_dialog.exchange_dialog.56hm6GSwe740") }}
        </div>
        <div class="value">
          <span>{{ Number(estimate).toFixed(2) | formatNumberRgx }}</span>
          {{ exchangeDate.to }}
        </div>
        <div></div>
      </div>
    </div>
    <div class="bt">
      <button @click="postExchange" class="bt-blue">
        {{ $t("account_dialog.exchange_dialog.56hu1m6wf9c0") }}
      </button>
      <div @click="recode" class="record">
        {{ $t("account_dialog.exchange_dialog.56hu1m6wfhs0") }}
      </div>
    </div>
    <div class="exchange_tip">
      <p v-for="(item, i) in tip" :key="i">{{ tip[i] }}</p>
    </div>
    <!-- 兑换明细 -->
    <el-dialog
      :visible.sync="detailShow"
      width="380px"
      :append-to-body="true"
      :show-close="false"
      v-if="detailShow"
    >
      <detail-list
        :exchangeDate="exchangeDate"
        :estimate="estimate"
        :account="account"
        @closeDetail="closeDetail"
      ></detail-list>
    </el-dialog>
    <!-- 兑换记录 -->
    <RecordList
      ref="recodeList"
      :show="showRecord"
      @closeRecord="closeRecord"
    ></RecordList>
  </el-dialog>
</template>

<script>
import RecordList from "@/components/account_dialog/exchange_record.vue";
import DetailList from "@/components/account_dialog/exchange_detail_record.vue";
import { numMulti } from "@/assets/js/calculation.js";
import { get_exchange, get_asset_list } from "@/assets/js/API/order.js";
import { get_exchange_rate } from "@/assets/js/API/system.js";
export default {
  props: {
    show: Boolean,
    exchangeMarket: String,
  },
  components: {
    RecordList,
    DetailList,
  },
  data() {
    return {
      account: {
        assetAccount: {
          CN: {},
          HK: {},
          US: {},
        }, // 兑换账户
        fee: [],
        rate: "", // 汇率
      },
      option: [],
      exchangeDate: {
        from: "HKD",
        to: "USD",
        amount: null,
      },
      estimate: 0, // 预计兑换金额
      tip: [], // 温馨提示
      showRecord: false, // 展示兑换记录列表
      detailShow: false, // 兑换明细表
      currencyBalance: 0, // 当前币种账户余额
    };
  },
  created() {},
  mounted() {},
  methods: {
    hideExchange() {
      this.exchangeDate.amount = null;
      this.$emit("close", "exchangeShow");
    },
    // 关闭兑换记录框
    closeRecord() {
      this.showRecord = false;
    },
    // 关闭兑换详情对话框
    closeDetail(closeAll) {
      this.detailShow = false;
      if (closeAll) {
        this.recode();
        this.hideExchange();
      }
    },
    // 获取货币兑换信息
    // async getExchange() {
    //   // 当前币种获取账户余额
    //   await this.getAssetList(this.exchangeDate.from);
    //   // 获取兑换手续费
    //   await this.getRates(this.exchangeDate);
    // },
    async getRates(exchangeDate) {
      if (exchangeDate.from == exchangeDate.to)
        return this.$message.error(
          this.$t("account_dialog.exchange_dialog.56hu1m6wgek0")
        );
      let data = {
        from: this.exchangeDate.from,
        to: this.exchangeDate.to,
      };
      const prems = await get_exchange_rate(data);
      if (prems.code != 1) return this.$message.error(prems.msg);
      this.account.rate = prems.data.rate;
    },
    // 得到所有账户余额
    async getAssetList() {
      const res = await get_asset_list({ currency: "" });
      if (res.code != 1) return this.$message.error(res.msg);
      this.account.assetAccount.CN = res.data.list[0];
      this.account.assetAccount.HK = res.data.list[1];
      this.account.assetAccount.US = res.data.list[2];
      if (this.exchangeDate.from == "CNH") {
        if (Number(this.account.assetAccount.CN.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      } else if (this.exchangeDate.from == "USD") {
        if (Number(this.assetAccount.US.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      } else {
        if (Number(this.account.assetAccount.HK.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      }
      console.log(this.assetAccount, "请求");
      // if (Number(this.currencyBalance) <= 0)
      //   return this.$message.error(this.$t('account_dialog.exchange_dialog.56hu1m6wfq80'));
    },
    // 获取兑换货币方向
    getDirection() {
      if (this.exchangeMarket) {
        if (this.exchangeMarket == "HKD") {
          this.exchangeDate = {
            from: "USD",
            to: "HKD",
            amount: null,
          };
        } else if (this.exchangeMarket == "CNH") {
          this.exchangeDate = {
            from: "HKD",
            to: "CNH",
            amount: null,
          };
        } else {
          this.exchangeDate = {
            from: "HKD",
            to: "USD",
            amount: null,
          };
        }
      } else {
        if (this.accountType == 1) {
          this.exchangeDate = {
            from: "CNH",
            to: "HKD",
            amount: null,
          };
        } else if (this.accountType == 2) {
          this.exchangeDate = {
            from: "HKD",
            to: "USD",
            amount: null,
          };
        } else {
          this.exchangeDate = {
            from: "USD",
            to: "HKD",
            amount: null,
          };
        }
      }
    },
    // 获取货币兑换信息
    async getExchange() {
      const res = await get_exchange(this.exchangeDate);
      if (res.code != 1) return this.$message.error(res.msg);
      this.account.fee = res.data.fee;
      this.tip = res.data.remind.split("\n");
      // this.estimateCost(this.exchangeDate.amount);
      this.estimate = 0;
      this.exchangeDate.amount = null;
    },
    // 申请兑换货币
    postExchange() {
      if (!this.exchangeDate.amount || this.exchangeDate.amount <= 0)
        return this.$message.error(
          this.$t("account_dialog.exchange_dialog.56hu1m6wfy00")
        );
      let val = numMulti(Number(this.exchangeDate.amount), 100);
      if (Number(val % 1) != 0)
        return this.$message.error(
          this.$t("account_dialog.exchange_dialog.56hu1m6wg6g0")
        );
      if (this.exchangeDate.from == this.exchangeDate.to)
        return this.$message.error(
          this.$t("account_dialog.exchange_dialog.56hu1m6wgek0")
        );
      if (this.account.assetAccount) {
        if (this.exchangeDate.from == "CNH") {
          if (
            Number(this.exchangeDate.amount) >
            Number(this.account.assetAccount.CN.balance)
          )
            return this.$message.error(
              this.$t("account_dialog.exchange_dialog.56hu1m6wgms0")
            );
        } else if (this.exchangeDate.from == "USD") {
          if (
            Number(this.exchangeDate.amount) >
            Number(this.account.assetAccount.US.balance)
          )
            return this.$message.error(
              this.$t("account_dialog.exchange_dialog.56hu1m6wgms0")
            );
        } else {
          if (
            Number(this.exchangeDate.amount) >
            Number(this.account.assetAccount.HK.balance)
          )
            return this.$message.error(
              this.$t("account_dialog.exchange_dialog.56hu1m6wgms0")
            );
        }
      }
      this.detailShow = true;
    },
    // 获取选择账户类型
    async getType() {
      await this.getExchange();
      await this.getAssetList();
      await this.getRates(this.exchangeDate);
      let value = "";
      let label = "";
      this.option = [];
      for (let item in this.account.assetAccount) {
        // 遍历数组组成{name: "港股账户(0258)"， value: "HKD", img}
        if (item === "CN") {
          value = "CNH";
          label = `${this.$t("m.CN_account")}(${this.account.assetAccount[
            item
          ].openNum.substring(
            this.account.assetAccount[item].openNum.length - 4
          )})`;
        } else if (item === "US") {
          value = "USD";
          label = `${this.$t("m.US_account")}(${this.account.assetAccount[
            item
          ].openNum.slice(-4)})`;
        } else {
          value = "HKD";
          label = `${this.$t("m.HK_account")}(${this.account.assetAccount[
            item
          ].openNum.slice(-4)})`;
        }
        this.option.push({
          label,
          value,
        });
      }
    },
    // 交换兑换类型
    async changeTo() {
      let item = this.exchangeDate.from;
      this.exchangeDate.from = this.exchangeDate.to;
      this.exchangeDate.to = item;
      await this.getRates(this.exchangeDate);
      if (this.exchangeDate.amount) {
        this.estimateCost(this.exchangeDate.amount);
      }
    },
    // 预估兑入金额
    estimateCost(amount) {
      if (this.account.rate !== "" || this.account.rate != undefined) {
        this.estimate = Number(amount) / Number(this.account.rate);
      }
      if (this.exchangeDate.from == "CNH") {
        if (Number(this.account.assetAccount.CN.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      } else if (this.exchangeDate.from == "USD") {
        if (Number(this.account.assetAccount.US.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      } else {
        if (Number(this.account.assetAccount.HK.balance) <= 0)
          return this.$message.error(
            this.$t("account_dialog.exchange_dialog.56hu1m6wfq80")
          );
      }
      this.exchangeDate.amount = amount;
    },
    // 跳转兑换详情列表
    recode() {
      this.showRecord = true;
      // this.hideExchange();
      this.$refs.recodeList.getRecordList();
    },
  },
  computed: {
    accountType() {
      return this.$store.state.index.accountType;
    },
  },
  watch: {
    exchangeMarket(val) {
      this.exchangeMarket = val;
      return this.getDirection();
    },
    accountType(val) {
      console.log(val, "请i去");
      return this.getDirection();
    },
  },
};
</script>
<style lang="less">
.exchange_obj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .type_jh {
    height: 22px;
  }
  .el-input__inner {
    background-color: transparent;
    border: none;
    color: @fff;
    padding-left: 50px;
    font-size: 14px;
    width: 200px;
  }
  .el-input__prefix {
    display: flex;
    align-items: center;
    padding: 0 10px 0 5px;
    .type_img {
      width: 32px;
      height: 25px;
    }
  }
}
.exchange_input {
  color: @fff;
  font-size: 12px;
  padding-top: 20px;
  padding-left: 10px;
  .currency {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 10px;
    .type {
      text-align: left;
      width: 160px;
    }
    .value {
      text-align: left;
      width: 160px;
    }
    .amount {
      background-color: transparent;
      border: none;
      color: @fff;
    }
  }
  .total_amount {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
    .type {
      text-align: left;
      width: 160px;
    }
    .total {
      width: 270px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .exchange_total {
        text-align: right;
        width: 80px;
        color: @hoverColor;
        cursor: pointer;
        padding-right: 12px;
      }
    }
  }
}
.bt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 20px 0;
  .record {
    color: @hoverColor;
    font-size: 12px;
    position: absolute;
    right: 42px;
    cursor: pointer;
  }
}
.exchange_tip {
  color: @fbSix;
  font-size: 12px;
  padding-left: 10px;
}
.el-popper li {
  padding: 0 20px !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>